<%@ page language="java" import="java.util.*,org.apache.struts2.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="s" uri="/struts-tags"   %>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<!DOCTYPE HTML>
<html>
<head>
	<title></title>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link href="<%=basePath %>/assets/css/dpl-min.css" rel="stylesheet" type="text/css" />
	<link href="<%=basePath %>/assets/css/bui-min.css" rel="stylesheet" type="text/css" />
    <link href="<%=basePath %>/assets/css/page-min.css" rel="stylesheet" type="text/css" />
    <style type="text/css">
    	.form-horizontal{
    		margin-top:20px;
    	}
    	.control-group , .bui-uploader{
    		width:900px;
    		margin:auto;
    	}
    	.bui-uploader-button{
    		margin-top:-40px;
    		margin-left:110px;
    	}
    </style> 
</head>
<body>
	<form id="J_Form" action="<%=basePath %>/RootSort_insert" class="form-horizontal" method="post">
      <div class="control-group">
        <label class="control-label"><s>*</s>主类名称:</label>
        <div class="controls" style="width:80%">
          <input name="name" type="text" class="input-large" data-rules="{required : true}"  >
        </div>
      </div>
      <div class="control-group" >
        <label class="control-label"><s>*</s>主类简介:</label>
        <div class="controls  control-row-auto">
          <textarea name="info"  class="control-row5 input-large" data-rules="{required : true}"  style="margin: 0px;"></textarea>
        </div>
      </div>
      <div class="control-group">
        <label class="control-label"><s>*</s>上传图片:</label>
        <div class="controls">
          	<input id="img" type="hidden" name="img" value=""  data-rules="{required : true}" data-messages="{required:'请上传图片'}">
	      	<div id="J_Uploader">
        	</div>
      	</div>
      </div>
      <div class="row actions-bar" id="bottom">       
         <div class="form-actions span13 offset3">
           <button type="submit" class="button button-primary">保存</button>
           <button type="reset" class="button">重置</button>
         </div>
      </div>       
    </form>
</body>
	<script type="text/javascript" src="<%=basePath %>/assets/js/jquery-1.8.1.min.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/bui.js"></script>
	<script type="text/javascript" src="<%=basePath %>/assets/js/config.js"></script>
    <script type="text/javascript">
		var Form = BUI.Form;
		new Form.Form({
		  srcNode : '#J_Form'
		}).render();
		BUI.use('bui/uploader',function (Uploader) {
			
			//带图片预览的主题
			  Uploader.Theme.addTheme('mytheme', {
			    elCls: 'imageViewTheme',
			    queue:{
			      resultTpl: {
			          'default': '<div class="default">{name}</div>',
			          'success': '<div data-url="{img}" class="success_url"><img src="<%=basePath%>{url}" title="{name}" style="width:100%;height:100%;"></div>',
			          'error': '<div class="error"><span title="{name}">{msg}</span></div>',
			          'progress': '<div class="progress"><div class="bar" style="width:{loadedPercent}%"></div></div>'
			      }
			    }
			  });
		
		     var uploader = new Uploader.Uploader({
		       render: '#J_Uploader',
		       //在那个元素前面
		       elBefore : '#bottom',
		       //指定使用主题
        	   theme: 'mytheme',
        	   //是否能上传多个文件
			   multiple:false,
		       url: '<%=basePath%>/RootSort_JUpload',
		       rules: {
		         //文的类型
		         ext: ['.png,.jpg','文件类型只能为{0}'],
		         //上传的最大个数
		         max: [1, '只能上传{0}个图片'],
		         //文件大小的最小值,这个单位是kb
		         minSize: [0, '文件的大小不能小于{0}KB'],
		         //文件大小的最大值,单位也是kb
		         maxSize: [1024, '文件大小不能大于1M']
		       },
		       isSuccess: function(res){
		       		$("#img").attr("value",res.url);
		       		return true;
		       }
		      }).render();
		   });
	</script>
</html>
